<template>
	<view class="content">
		<view class="top-wrap"></view>
		<view class="wrap">
			<view class="title">同城悦圈</view>
			<view class="text" style="color: #fff;">
				<view class="line">
					<text>要真实</text><text>要同城</text><text>要悦圈</text>
				</view>
			</view>
			<button class="new-btn login-btn" @click="nav('login')">登录</button>
			<view class="other-login">
			<view class="xieyi flex-c">
				<u-checkbox v-model="xieyi"></u-checkbox>
				<view> 我已阅读以下协议地址并同意进行注册<!--<text @click="openPage(2)">《用户协议》</text>和<text @click="openPage(3)">《用户隐私政策》</text> --></view>
			</view>
			
			<view class="xieyi flex-c">
			
			 <view>http://mtw.so/6iCBDk</view>
						
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xieyi: true
			}
		},
		onLoad() {

		},
		methods: {
			nav(text){
				if(text=='login'){
					if(this.xieyi==0){
						return this.$u.toast('请勾选同意协议')
					}
				}
				let that = this
				return new Promise(async resolve =>{
				   uni.login({
					  provider: 'weixin',
					  async success(loginRes) {
						  console.log(loginRes);
						 const {data: res} = await that.$Request({
							url: 'apis/home/user/getopenid',
							data: {
								code: loginRes.code
							}
						})
						console.log("openid是什么")
						console.log(res)
						uni.setStorage({key: 'openid',data: res.openid})
						if(!res.data){
							uni.navigateTo({
								url:"/pages/register/index"
							})
						}
						
						if(res.data){
							that.$store.state.hasLogin = true
								that.$store.state.userinfo = res.data
								that.$store.state.sex = res.data.sex
								that.$store.state.isVip = res.data.is_vip
								that.$store.state.userid = res.data.id
								uni.setStorage({key: 'uid',data: res.data.id})
								uni.setStorage({key: 'sex',data: res.data.sex})
								uni.setStorage({key: 'isVip',data: res.data.is_vip})
							//	uni.setStorage({key: 'rz',data: res.data.is_identity_authentication})
								console.log(res.data.id)
							uni.switchTab({
								url:"/pages/index/index"
							})
						}
								
					  }
					})
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #000;
		
		/* 上方滚动 */
		.top-wrap {
			background-image: url('https://z3.ax1x.com/2021/07/20/WtaMtK.jpg');
			background-size: 100%;
			/* background-color: #d800ff; */
			padding: 0;
			width: 100vw;
			-webkit-animation: slideop 30s linear infinite;
			animation: slideop 30s linear infinite;
			background-position: 0 bottom;
			width: 100vw;
			height: 55vh;
		}

		@keyframes slideop {
			0% {
				background-position: 0;
			}

			100% {
				background-position: 0 bottom;
			}
		}
		
		.wrap {
			padding: 10px;
			box-shadow: 0 10px 30px 50px #000;
			.title {
				margin: 20rpx 30rpx;
				color: #fff;
				font-size: 25px;
				font-weight: bold;
			}

			.text {
				margin: 0rpx 30rpx;
				text{
					margin-right: 10px;
					color: #fff;
				}
			}
			
			.new-btn {
				background: linear-gradient(to right, #d9a14e, #b57e2c);
				color: #000;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 90rpx;
				width: calc(100% - 80rpx);
				margin: 60rpx 40rpx;
				border-radius: 60rpx;
			}
			.check-box {
				border: 1px solid #ddd;
				width: 20px;
				height: 20px;
				margin-right: 5px;
			}

			.check-box.active {
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.xieyi {
				color: #fff;
				text{
					color: #fff;
				}
			}
		}
	}
	
</style>
